<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字体属性</title>

        <style type="text/css">
            /* .wrapper 等同于 [class~=wrapper] */
            .wrapper{
                width: 80% ;
                height: 50px ;
                line-height: 50px ;
                margin: 15px auto ;
            }

            .first { background-color: #dedede ; }

            .second {   background-color: #ffff00 ; }

            .second>* {
                color : blue ; /* 设置元素内部文本的颜色 (通常被称作前景色) */
                text-align: center ; /* 控制元素内部内容的水平排列方式 ( left | center | right ) */
                /* none | underline (下划线) | line-through (删除线) | overline (上划线) */
                text-decoration: none ; /* 设置 文本装饰效果 ( none | underline | line-through | overline )*/
                font-style: normal ; /* 字体风格 ( 包括正常和斜体两种风格 )*/
                font-weight: normal ; /* 字体粗细 */
            }

            .text:hover {
                text-decoration: underline line-through overline ;
            }

            .third {
                border: 1px solid blue ;
                text-align: center ;
                font-size: 30px ;
                /* text-shadow: h-shadow v-shadow blur color ; */
                text-shadow: 2px 2px 3px red ;
                letter-spacing: .25em ; /* .25em 等同于 .25em */
            }

            .fourth {
                border: 1px solid green ;
                text-shadow: 2px 2px 3px red ;
                letter-spacing: .25em ;
                word-spacing: 3em ;
                text-transform : capitalize ; /* uppercase | lowercase | capitalize | none */
            }

            .fifth {
                border: 1px solid green ;
                text-shadow: 2px 2px 3px red ;
                direction : rtl ; /* ltr : left to right / rtl : right to left */
            }

          
        </style>

    </head>
    <body>

        <div class="wrapper first">
            <a>链接或锚点</a>
            <span>定义普通文本</span>
            <u>带有下划线的文本</u>
            <i>斜体文笔</i>
            <s>带有删除线(中划线)的文本</s>
            <b>加粗的文本</b>
            <strong>特别强调</strong>
            <em>斜体文本</em>
        </div>

        <div class="wrapper second">
            <a>链接或锚点</a>
            <span class="text">定义普通文本</span>
            <u>带有下划线的文本</u>
            <i>斜体文本</i>
            <s>带有删除线(中划线)的文本</s>
            <b>加粗的文本</b>
            <strong>特别强调</strong>
            <em>斜体文本</em>
        </div>

        <div class="wrapper third">
            佟姐小时候还是很<s>可爱的</s>
        </div>

        <div class="wrapper fourth">
            May the force be with you .
        </div>

        
        <div class="wrapper fifth">
            May the force be with you .
        </div>
        
    </body>
</html>